<template>
  <div class="recommend-card">
    <div class="recommend-title">为你推荐</div>
    <div
      v-for="app in recommendApps"
      :key="app.id"
      class="app-item"
      @click="handleAppClick(app.id)"
    >
      <div class="app-name">{{ app.appName }}</div>
      <div class="app-category">{{ app.appCategory }}</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {queryRecommendAppsToUserPage} from "@/api/app.js";

const router = useRouter();
const recommendApps = ref([]);

const getRecommendApps = async () => {
  try {
    const response = await queryRecommendAppsToUserPage();
    if (response.data.code === 1) {
      recommendApps.value = response.data.data;
    }
  } catch (error) {
    console.error('获取推荐应用失败:', error);
  }
};

const handleAppClick = (appId) => {
  router.push(`/app/${appId}`)
};

onMounted(() => {
  getRecommendApps();
});
</script>

<style scoped>
.recommend-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommend-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.app-item {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  word-wrap: break-word; /* 文字超出卡片换行 */
}

.app-item:hover {
  transform: translateY(-5px); /* 悬浮时卡片向上浮动 */
}

.app-name {
  font-weight: bold;
  color: var(--color-text-2);
}

.app-category {
  color: var(--color-text-3);
}
</style>
